<div v-bind:class="[componentId]">
	<div class="session-home-widget">	
		<el-tabs v-model="sessionGraphTab" type="card" stretch>
			<el-tab-pane :name="item.value" :key="idx" v-for="(item, idx) in chooseProperties" >
				<div slot="label">
					<div class="text-medium color-cool-gray-100 bu-mb-1 bu-p-5">
						<div class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-space-between">
							<div>
								<span class="text-medium">{{item.label}}</span>
								<span v-if="item.description" class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-2"  v-tooltip.top-center="item.description"></span>
							</div>
						</div>
						<div class="bu-is-flex bu-is-align-items-baseline number">
							<h2>{{item.number}}</h2>
							<div v-if="item.trend == 'u'" class="trend-up">
								<i class="fas fa-arrow-up bu-pr-1"></i><span>{{item.trendValue}}</span>
							</div>
							<div v-if="item.trend == 'd'" class="trend-down"> 
								<i class="fas fa-arrow-down bu-pr-1"></i><span>{{item.trendValue}}</span>
							</div>
						</div>
					</div>
				</div>
				<div style="border-radius: 0 0px 4px 4px; background-color: #ffffff; border: 1px solid #ececec ">
                <cly-chart-time category="session" :option="chartData(item.value)"></cly-chart-time>
				</div>
			</el-tab-pane>	              
        </el-tabs>			
	</div>
</div>